<template>
  <div>
    <div class="query">
      <div class="content">
        <h3>查询条件</h3>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="角色">
            <el-select v-model="formInline.rid" placeholder="选择角色">
              <el-option
                v-for="item in datas"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="formInline.phone" placeholder="请输入电话" maxlength="11" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  @click="reSet"><i class="el-icon-refresh"></i>重置</el-button>
            <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
<!--    <query></query>-->
    <div class="list">
      <div class="content">
        <h3>账号列表</h3>
        <el-button type="primary" size="medial" @click="add" round><i class="el-icon-plus"></i>添加</el-button>
        <el-button type="danger" size="medial" @click="deleteAdmins" round><i class="el-icon-delete"></i>删除</el-button>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="登录名"
            prop="loginName"
            width="120">
            <!--          <template slot-scope="scope">{{ scope.row.date }}</template>-->
          </el-table-column>
          <el-table-column
            prop="adminName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="departmentInfo.departmentName"
            label="部门">
          </el-table-column>
          <el-table-column
            prop="roleInfo.roleName"
            label="角色">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            :formatter="formatDate">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="editAdmin(scope.row)">编辑</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link type="primary" @click="deleteAdmin(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>

        </el-table>
        <div style="float: right;margin-top: 5px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 50, 100]"
            :page-size= 'size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
  </div>

</template>

<script>
var all = []
import query from "./query";
export default {
  inject:['reload'],
  name: "accountList",
  components: {query},
  beforeCreate(){
    this.axios.get("micro-sys-server/sys/allFromRedis").then( res => {

      let datas = res.data.data
      // console.log(res)
      all = res.data.data
      this.total = datas.length
      if(this.total>10){
        for (let i=0;i<10;i++){
          this.tableData.push(datas[i])
        }
      }else {
        for (let i=0;i<datas.length;i++){
          this.tableData.push(datas[i])
        }
      }
    });
    this.axios.get("micro-sys-server/role/all").then( res => {

      this.datas = res.data.data

    });
  },
  data(){
    return {
      tableData: [],
      multipleSelection: [],
      currentPage4: 1,
      size: 10,
      total:0,
      formInline: {
        name: '',
        phone:'',
        rid: null
      },
      datas: []
    }
  },
  methods:{
    //时间格式化
    formatDate:function(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return ''
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage4 = 1
      this.tableData=[]
      if(all.length < val){
        for (let i=0;i<all.length;i++){
          this.tableData[i] = all[i]
        }
      }else {
        for (let i=0;i<val;i++){
          this.tableData[i] = all[i]
        }
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tableData=[]
      let j = this.size
      let start = j * (val - 1 )
      if(all.length > val*this.size){
        for (let i=0;i<j;i++){
          this.tableData[i] = all[i+start]
        }
      }else {
        for (let i=0;i<all.length-start;i++){
          this.tableData[i] = all[i+start]
        }
      }
    },
    add(){
      this.$router.push({path:'/main/addAccount/新增账号'})
    },
    onSubmit() {
      console.log(this.formInline);
      let data = {
        roleInfo: {
          id: this.formInline.rid
        },
        adminName: this.formInline.name,
        phone: this.formInline.phone
      }
      this.axios.post("micro-sys-server/sys/findByCondition",data,).then(res => {
        console.log(res)
        all = res.data.data
        this.tableData = []
        this.total = all.length
        this.size = 10
        this.currentPage4 = 1
        if(this.total>10){
          for (let i=0;i<10;i++){
            this.tableData.push(all[i])
          }
        }else {
          for (let i=0;i<all.length;i++){
            this.tableData.push(all[i])
          }
        }
      });
    },
    reSet(){
      this.formInline = {}
    },
    deleteAdmin(id){
      this.$confirm('ARE U SURE?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.put("sys/"+ id ).then( res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.reload()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteAdmins(){
      this.$confirm('ARE U SURE SURE?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i=0;i<this.multipleSelection.length;i++){
          this.axios.put("micro-sys-server/sys/"+ this.multipleSelection[i].id ).then( res => {
            console.log(res)
          });
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editAdmin(admin){
      this.$router.push({path:'/main/editAccount',
      query:{
        admin: admin
      }})
    }
  }
}
</script>

<style scoped>
.list{
  /*height: 400px;*/
  border: 1px solid white;
  width: 96%;
  margin-left: 2%;
  margin-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: white;
}
.query{
  height: 120px;
  border: 1px solid white;
  width: 96%;
  margin: auto;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: white;
}
</style>
